<template>
	<HeaderNav />
	
	<!-- 充值窗口 -->
	<div class="cvs" v-show="payWin">
		<div class="newModWin zfb-win">
			<section class="clearfix">
				<div class="title">支付宝快速充值兑换积分</div>
				<!-- 关闭弹出层 -->
				<div class="close" @click="payWin = false"></div>
			</section>
			
			<div class="zfb">
				<div class="clearfix">
					<input type="number" name="money" placeholder="请输入充值金额,单位元"/>
					<input type="button" class="zfb-btn" value="充值" />
				</div>
				<b>充值比例：1元=10积分</b>
			</div>
		</div>
	</div>
	
	<article>
		<!-- 网站主体 -->
		<div id="main" class="clearfix">
			<!-- 定义右侧窗口信息 -->
			<section class="aside">
				
				<UserDetail :user="user"></UserDetail>	
				
				<!-- 关注数 -->
				<aside class="psl">
					<a class="focus-on" href="/attention">关注数:<b>{{user.attach}}</b></a>
					<a class="fan">粉丝数:<b>{{user.fans}}</b></a>
				</aside>
				
				<ScorePieShape  v-model="payWin" :score="user.score" :scoreDetails="scoreDetails"/>
			</section>
			<section>
				<h1 class="detail-score">积分明细</h1>
				<ul class="person-info">
					<li>
						<strong class="c1">资源名称</strong>
						<strong class="c2">积分变动</strong>
						<strong class="c3">原因</strong>
						<strong class="c4">时间</strong>
					</li>
					
					<!-- 
					<li>
						<a>暂无数据</a>
					</li> 
					-->
					<li>
						<a class="c1 link" href="/detail/1">java项目开发文档模板</a>
						<span class="c2">-10</span>
						<span class="c3"> - 下载资源扣除积分</span>
						<span class="c4">2021-09-13 22:06:01</span>
					</li>
					<li>
						<a class="c1 link" href="/detail/1">软件开发计划书（是 一个完整的项目开发文档）</a>
						<span class="c2">-50</span>
						<span class="c3"> - 下载资源扣除积分</span>
						<span class="c4">2021-09-13 22:06:01</span>
					</li>
					
					<li>
						<a class="c1 link" href="/detail/1">jquery封装好的验证码</a>
						<span class="c2">10</span>
						<span class="c3">- 资源被下载获得积分</span>
						<span class="c4">2021-09-13 22:06:01</span>
					</li>
					
					<li>
						<a class="c1">&lt;&lt;无资源&gt;&gt;</a>
						<span class="c2">20</span>
						<span class="c3">- 用户注册赠送积分</span>
						<span class="c4">2021-09-13 22:06:01</span>
					</li>
					
					<li>
						<a class="c1">&lt;&lt;无资源&gt;&gt;</a>
						<span class="c2">200</span>
						<span class="c3">- 支付宝充值获得积分</span>
						<span class="c4">2021-09-13 22:06:01</span>
					</li>
					
					<li>
						<a class="c1 link" href="/detail/1">基于s2sh带有进度条的文件上传</a>
						<span class="c2">2</span>
						<span class="c3">- 评论资源获得积分</span>
						<span class="c4">2021-09-13 22:06:01</span>
					</li>
					
					<li>
						<a class="c1 link" href="/detail/1">Java_ME_中文帮助文档</a>
						<span class="c2">20</span>
						<span class="c3">- 用户注册赠送积分</span>
						<span class="c4">2021-09-13 22:06:01</span>
					</li>
					
					<li>
						<a class="c1 link" href="/detail/1">Spring Cloud 2018最新_官网文档_中文参考手册_pdf</a>
						<span class="c2">-20</span>
						<span class="c3">- 资源被下载获得积分</span>
						<span class="c4">2021-09-13 22:06:01</span>
					</li>
					
					<li>
						<a class="c1 link" href="/detail/1">es6标准入门（第三版）_阮一峰.pdf</a>
						<span class="c2">5</span>
						<span class="c3">- 资源被下载获得积分</span>
						<span class="c4">2021-09-13 22:06:01</span>
					</li>
					
					<li>
						<a class="c1 link" href="/detail/1">Java_ME_中文帮助文档</a>
						<span class="c2">-5</span>
						<span class="c3">- 资源下载扣取积分</span>
						<span class="c4">2021-09-13 22:06:01</span>
					</li>
					
					<li>
						<a class="c1 link" href="/detail/1">Spring Cloud 2018最新_官网文档_中文参考手册_pdf</a>
						<span class="c2">-20</span>
						<span class="c3">- 资源被下载获得积分</span>
						<span class="c4">2021-09-13 22:06:01</span>
					</li>
					
					<li>
						<a class="c1 link" href="/detail/1">es6标准入门（第三版）_阮一峰.pdf</a>
						<span class="c2">5</span>
						<span class="c3">- 资源被下载获得积分</span>
						<span class="c4">2021-09-13 22:06:01</span>
					</li>
					
					<li>
						<a class="c1 link" href="/detail/1">Spring Cloud 2018最新_官网文档_中文参考手册_pdf</a>
						<span class="c2">-20</span>
						<span class="c3">- 资源被下载获得积分</span>
						<span class="c4">2021-09-13 22:06:01</span>
					</li>
					
					<li>
						<a class="c1 link" href="/detail/1">es6标准入门（第三版）_阮一峰.pdf</a>
						<span class="c2">5</span>
						<span class="c3">- 资源被下载获得积分</span>
						<span class="c4">2021-09-13 22:06:01</span>
					</li>
					
					<li>
						<a class="c1 link" href="/detail/1">Java_ME_中文帮助文档</a>
						<span class="c2">-5</span>
						<span class="c3">- 资源下载扣取积分</span>
						<span class="c4">2021-09-13 22:06:01</span>
					</li>
					
				</ul>
				
				<!-- 分页插件 -->
				<VanPagination v-model="page" :totalItems="total" :itemsPerPage="15" :showPageSize="5" 
					:forceEllipses="true" />
			</section>
			
		</div>
	</article>
	<Footer />
</template>

<script>
import HeaderNav from "../components/HeaderNav.vue";
import Footer from "../components/Footer.vue"; 
import VanPagination from '../components/VanPagination.vue' ;	
import UserDetail from '../components/UserDetail.vue' ;	
import ScorePieShape from '../components/ScorePieShape.vue' ;
export default {
	components: {
		HeaderNav, 
		Footer , 
		VanPagination ,
		UserDetail,
		ScorePieShape,
	},
	data() {
		return {
			page: 1, 
			total: 100, 
			payWin: false , // 充值窗口
			user: {
				score: 10,
				nickName: "─╀0vЁ灬残夜" ,
				sex: "m" , 
				email: "haredot@outlook.com" ,
				tel: "13312345433", 
				photo: "", 
				attach: 10, // 关注数
				fans: 20 , // 粉丝数
			},
			scoreDetails:[
				{value: 335, name: '支付宝充值'},
				{value: 310, name: '用户注册'},
				{value: 234, name: '上传资源'},
				{value: 135, name: '评论资源'},
				{value: 1548, name: '下载文件'}
			]
		}
	}
}
</script>

<style>
</style>